<template>
	<view class="uiwu">
		<image src="/static/paymentbg.png" mode="widthFix" class="uiwu-image"></image>
		<uiwu-head-bar title="订单支付" titleColor="#FFF" ></uiwu-head-bar>
		<view class="uiwu-money uiwu-flex uiwu-flex-center">
			<uiwu-price-model money_size="50" symbol_size="50" :money="order_amount" colors="#fff" ></uiwu-price-model>
		</view>
		<radio-group @change="changeRadio" >
			<view class="uiwu-list">
				<view class="uiwu-list-item uiwu-flex uiwu-flex-align" v-for="(item,index) in paylist" :key="index">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="uiwu-flex-column">
						<text class="name">{{item.short_name}}</text>
						<text class="doc">{{item.extra}}</text>
					</view>
					<radio :value="item.pay_way" color="#3377FE" />
				</view>
			</view>
		</radio-group>
		<uiwu-footer>
			<view @tap.stop="confirm" class="uiwu-button uiwu-flex uiwu-flex-center" >立即支付</view>
		</uiwu-footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_amount:0,
				paylist:[],
				pay_way:'',
				order_id:'',
				from:'',
				opentype:''
			};
		},
		onLoad({from,order_id,type}) {
			this.opentype = type
			this.from = from;
			this.order_id = order_id
			this.getPaylist(from,order_id)
		},
		methods:{
			/**
			 * 发起支付
			 */
			async confirm(){
				if(!this.pay_way) return this.uiwu.toast('请选择支付方式')
				const { data , msg , code } = await this.uiwu.post({
					url:'payment/prepay',
					data:{
						order_id:this.order_id,
						from:this.from,
						pay_way:this.pay_way
					}
				})
				if(!code) return this.uiwu.toast(msg)
				if(this.pay_way == 1){
					await this.uiwu.wxpay(data)
					this.uiwu.toast('支付成功')
				}
				if(this.pay_way != 1){
					this.uiwu.toast('支付成功')
				}
				if(this.opentype == 'driver'){
					this.uiwu.openWindow('/pageB/pages/index/index?index=1','close')
				}
				if(this.opentype == 'user'){
					this.uiwu.openWindow('/pages/user/task','close')
				}
				if(this.opentype == 'weikuan'){
					uni.navigateBack()
				}
				if(this.opentype == 'recharge'){
					uni.navigateBack({
						delta:2
					})
				}
			},
			/**
			 * getPaylist 获取支付列表
			 * @param {Object} from 订单类型
			 * @param {Object} order_id 订单ID
			 */
			async getPaylist(from,order_id){
				const { data , msg , code } = await this.uiwu.get ({
					url:'payment/payway',
					data:{
						from,
						order_id
					}
				})
				if(!code) return this.uiwu.toast(msg)
				this.order_amount = data.order_amount
				this.paylist = data.pay
			},
			/**
			 * 选择支付方式
			 */
			changeRadio({detail:{value}}){
				this.pay_way = value
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.uiwu-image{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
	}
	.uiwu-money{
		width: 100%;
		height: 217rpx;
		position: relative;
		z-index: 9;
	}
	.uiwu-list{
		width: 100%;
		border-radius: 40rpx;
		background-color: #fff;
		position: relative;
		z-index: 9;
		padding: 0 40rpx;
		&-item{
			padding: 50rpx 0;
			border-bottom: 1rpx dashed #E6E6E6;
			&:last-child{
				border-bottom: 0 solid #000;
			}
			image{
				width: 66rpx;
				margin-right: 24rpx;
			}
			>view{
				flex: 1;
			}
			.name{
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				margin-bottom: 4rpx;
			}
			.doc{
				font-size: 26rpx;
				font-weight: 300;
				color: #ACAFB5;
			}
			radio{
				transform: scale(0.8);
			}
		}
		
	}
	.uiwu-button{
		width: 670rpx;
		height: 80rpx;
		background: $bgColor;
		box-shadow: 0px 15rpx 30rpx 1rpx rgba(66,130,254,0.16);
		border-radius: 40rpx;
		margin: 5rpx auto;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
